import { Outlet } from "react-router-dom";
import './layout.scss';
import { Avatar, Dropdown, type MenuProps } from "antd";
import { Address } from "@ant-design/web3";
import { UserOutlined } from '@ant-design/icons';
import { useAppSelector } from '@/store/hooks';
import type { RootState } from "@/store";
import ChangeAccount from "@/components/changeAccount";
import { useRef } from "react";
import { useDisConnect } from "@/utils/hooks.tsx";
import SwitchChain from "./switchChain";

const Layout = () => {
  const changeAccountRef = useRef<{ open: () => void } | null>(null);
  const walletState = useAppSelector((state: RootState) => state.wallet);
  const switchChainRef = useRef<{ setOpen: (open: boolean) => void } | null>(null);
  const disConnect = useDisConnect();
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: '个人信息',
    },
    {
      key: '2',
      label: '切换账户',
      onClick: () => changeAccountRef.current?.open()
    },
    {
      key: '3',
      label: '切换网络',
      onClick: async () => {
        switchChainRef.current?.setOpen(true)
      }
    },
    {
      key: '4',
      label: '断开连接',
      onClick: async () => {
        disConnect();
      }
    },
  ];
  return <div>
    <div className="flex p-[20px] border-b h-[64px]">
      <div className="flex-1"></div>
      <Dropdown menu={{ items }}>
        <div className="flex items-center cursor-pointer">
          <Avatar style={{ backgroundColor: '#87d068', marginRight: 10 }} icon={<UserOutlined />} />
          <Address ellipsis tooltip={false} address={ walletState.address || '' } />
        </div>
      </Dropdown>
    </div>
    <ChangeAccount ref={changeAccountRef} />
    <SwitchChain ref={switchChainRef} setOpen={(open) => switchChainRef.current?.setOpen(open)} />
    <div>
       <Outlet />
    </div>
  </div>
}

export default Layout